<template>
  <el-card class="box-card">

    <div class="adminMain">
      <h2 class="titleHeader">
        超级管理
      </h2>
      <!-- 下面是卡片 -->
      <div class="card is-active">
        <AdminCard></AdminCard>
        <div class="card__content">
          <div class="card__info">
            <h2 class="card__name">{{ superAdminMessage.username }}<img
                :src="store.state.BaseUrl + superAdminMessage.avatar" v-if='superAdminMessage.avatar' alt=""
                class="cardAvatar" />
            </h2>

            <h3 class="card__title">
              创建时间：{{ dayjs(superAdminMessage.createTime).format('YYYY-MM-DD') }}
            </h3>
            <p class="card__desc">
              没有礁石，就没有美丽的浪花;没有挫折，就没有壮丽的人生。
            </p>

            <p class="card__desc">
              tel | v：18803425419
            </p>
          </div>
          <div class="card__actions">
            <button class="btn btn--action" @click="openNewPage('https://www.cnblogs.com/qiaomucreate/')">
              他的博客园
            </button>
            <button class="btn btn--action" @click="openNewPage('https://gitee.com/zyqwasd')">
              他的git仓库
            </button>

          </div>
        </div>
        <button class="btn btn--close">
          <svg viewBox="0 0 24 24">
            <path fill="var(--color-primary)"
              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">
            </path>
          </svg>
        </button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { getSuperAdmin } from '@/utils/adminHttp';
import { ref, onMounted, inject } from 'vue';
import AdminCard from '@/components/admin/AdminCard.vue';
import dayjs from 'dayjs'
const store: any = inject('store')
interface superAdminMessage {
  [props: string]: any
}
const superAdminMessage: superAdminMessage = ref({})
getSuperAdmin().then(res => {
  superAdminMessage.value = res.data
})

// 打开跳转其他页面
const openNewPage = (href: string) => {
  open(href)
}
// 下面是主管理卡片代码

onMounted(() => {
  const card: any = document.querySelector('.card')
  const open = card.querySelector('.card__illustration')
  const close = card.querySelector('.btn--close')
  const content = card.querySelector('.card__content')
  const illustration = card.querySelector('.card__illustration')
  const cls = {
    active: 'is-active',
    closing: 'is-closing',
  }

  open.addEventListener('click', () => {
    card.classList.add(cls.active)
  })

  close.addEventListener('click', () => {
    card.classList.add(cls.closing)
    card.classList.remove(cls.active)
  })

  content.addEventListener('animationend', () => {
    card.classList.remove(cls.closing)
  })

  illustration.addEventListener('mousemove', function (e: any) {
    const r = illustration.getBoundingClientRect()

    illustration.style.setProperty(
      '--x',
      e.clientX - (r.left + Math.floor(r.width / 2))
    )
    illustration.style.setProperty(
      '--y',
      e.clientY - (r.top + Math.floor(r.height / 2))
    )
  })

  illustration.addEventListener('mouseout', function () {
    illustration.style.setProperty('--x', 0)
    illustration.style.setProperty('--y', 0)
  })
})

</script>

<style lang="scss"  scoped>
.cardAvatar {
  width: 50px;
  height: 50px;
}
</style>